<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>首页</title>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <!-- Bootstrap -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="col-md-8 col-center text-center" id="app">
    <h2>学生管理系统</h2>
    <center>
        <form @submit.prevent id="form">
            <table class="table">
                <thead>
                <tr>
                    <th><input type="checkbox" id="firstCheck"></th>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>密码</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>生日</th>
                    <th>地址</th>
                </tr>
                </thead>
                <tbody id="student_dis">
                <tr v-for="(student) in studentList">
                    <td><input type="checkbox" name="id" :value="student.id"></td>
                    <td>{{student.id}}</td>
                    <td>{{student.name}}</td>
                    <td>{{student.password}}</td>
                    <td>{{student.age}}</td>
                    <td>{{student.sex}}</td>
                    <td>{{student.birthday}}</td>
                    <td>{{student.address}}</td>
                    <td>
                        <a class="btn btn-primary" :href="'/edit_vue.html?id='+student.id">修改</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <br>
            <input type="submit" @click="del()" class="btn btn-info" value="删除选中" />
            <a href="/add.html" class="btn btn-warning">增加</a>
        </form>
        <!--<a href="" class="btn-warning" onclick="javascript:location.href='/add.html'">增加</a>-->
    <div class="row">
        <nav>
            <ul class="pagination" id="page">
                <li id="previous_btn">
                    <a @click="findByPage(previousPage,pageSize)" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li v-for="(page) in pageNums" >
                    <a @click="findByPage(page,pageSize)">{{page}}</a>
                </li>
                <li id="next_btn">
                    <a @click="findByPage(nextPage,pageSize)" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
        每页显示
        <select name="pageSize" id="pageSize">
            <option value="5" selected="selected">5</option>
            <option value="10">10</option>
            <option value="15">15</option>
        </select>
        条
    </div>
    </center>
</div>
<script src="/js/vuejs-2.5.16.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/js/student.js"></script>
</body>
</html>